<template>
  <div class="index">
    <p class="title">
      <span>用户组织：{{this.$store.state.agent}}</span>
      <span>组织负责人：{{this.$store.state.agenter}}</span>
      <span>电话：{{this.$store.state.phone}}</span>
    </p>
    <ul class="screen">
      <li>
        <div>
          <p>风险等级</p>
          <b>{{risklevel}}</b>
        </div>
      </li>
      <li>
        <div>
          <p>体温异常 </p>
          <b>{{temperature}}</b>
        </div>
      </li>
      <li>
        <div>
          <p>确认病例 </p>
          <b>{{confirmrisk}}</b>
        </div>
      </li>
      <li>
        <div>
          <p>核酸检测 </p>
          <b>{{testper}}</b>
        </div>
      </li>
    </ul>
    <!-- <div class="area comtab" v-show='nomenu'>
      <span class="gap">地区</span>
      <ul>
        <li @click="changearea(v,k)" :class="k == areakey ? 'picked' : '' " v-for="(v, k) in arealist" :key='k'>
          <button type="button">{{v.name}}
          </button>
        </li>
      </ul>
    </div> -->
    <!-- <div class="school comtab" v-show='nomenu'>
      <span>学校等级</span>
      <ul>
        <li @click="changeschool(v,k)" :class="k == schoolkey ? 'picked' : '' " v-for="(v, k) in schoolist" :key='k'>
          <button type="button">{{v.name}}
          </button>
        </li>
      </ul>
    </div> -->
    <!-- <div class="person comtab" :class="ranklevel == 5 ? 'hide' : '' ">
      <span class="gap">人员</span>
      <ul>
        <li @click="changeper(v,k)" :class="k == perkey ? 'picked' : '' " v-for="(v, k) in perlist" :key='k'>
          <button type="button">{{v.name}}
          </button>
        </li>
      </ul>
    </div> -->
    <div class="situation">
      <span>测温统计</span>
      <ul>
       <li v-for="(v,i) in temlist" :key='i' @click='detailstext()'>
          <b>{{v.count}}</b>
          <p><i :class="v.risklevel == 'g' ? 'col1' : v.risklevel == 'y' ? 'col2' : v.risklevel == 'b' ? 'col3' : v.risklevel == 'o' ? 'col4' : v.risklevel == 'r' ? 'col5' : '' "></i>{{v.text}}
          </p>
        </li>
      </ul>
    </div>
    <div class="situation">
      <span>隔离统计</span>
      <ul>
        <li v-for="(v,i) in gaplist" :key='i' @click='detailstext()'>
          <b>{{v.count}}</b>
          <p><i :class="v.risklevel == 'g' ? 'col1' : v.risklevel == 'y' ? 'col2' : v.risklevel == 'b' ? 'col3' : v.risklevel == 'o' ? 'col4' : v.risklevel == 'r' ? 'col5' : '' "></i>{{v.text}}
          </p>
        </li>
      </ul>
    </div>
    <div class="situation">
      <span class="spespan">确诊和其他统计</span>
      <ul>
        <li v-for="(v,i) in confirmlist" :key='i' @click='detailstext()'>
          <b>{{v.count}}</b>
          <p><i :class="v.risklevel == 'g' ? 'col1' : v.risklevel == 'y' ? 'col2' : v.risklevel == 'b' ? 'col3' : v.risklevel == 'o' ? 'col4' : v.risklevel == 'r' ? 'col5' : '' "></i>{{v.text}}
          </p>
        </li>
      </ul>
    </div>
    <div class="trend">
      <h2>趋势分析</h2>
      <div class="timebox">
        <ul>
          <li>时间</li>
          <li @click='changeday(v,i)' :class="i == timekey ? 'actived' : '' " v-for="(v,i) in timelist" :key='i'>
            <button type="button">{{v.name}}</button>
          </li>
        </ul>
        <i class="el-input__icon el-icon-date timeicon"></i>

        <el-date-picker class="picktime" v-model="trendtime" type="daterange" @change="picktrendate" format="yyyy-MM-dd"
          value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>

      </div>
      <ul class="statistics">
        <li>统计项</li>
        <li @click='changepro(v,i)' :class="i == prokey ? 'picks' : '' " v-for="(v,i) in prolist" :key='i'>
          <button type="button">{{v.name}}</button>
        </li>
      </ul>
    </div>


    <div v-show='!emptyflag' class="region" style="margin-top: 20px;">
      <div id="singleChart" :style="{width: '1100px', height: '340px', backgroundColor:'#000418', float: 'left'}"></div>
    </div>
    <div v-show='emptyflag' id="leftChartempty" :style="{width: '1100px', height: '340px', backgroundColor:'#000418'}">
      无数据
    </div>


    <div id="schoolbox">
      <h3 class="vicetit">学生概况</h3>
      <div class="menu">
        <span>名字</span>
        <el-input class="inp" v-model="studentName" placeholder=""></el-input>
        <span class="studysta">状态</span>
        <el-select class="haveclasssta" v-model="studentsta" @change='picksta' placeholder="请选择">
          <el-option v-for="item in studentoptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" class="search" @click="searchdata"><i class="el-icon-search"></i> 搜索</el-button>
        <span class="exports">导出</span>
      </div>
      <div class="cabin">
        <table>
          <thead>
            <tr>
              <th v-for="(v,i) in studentheadlist" :key='i'>{{v}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(v,i) in studentdatalist" :key='i'>
              <td>{{ v.personId }}</td>
              <td>{{ v.name }}</td>
              <td>{{ v.sex | sexfilter }}</td>
              <td>{{ v.tp }}</td>
              <td>{{ v.createtime }}</td>
              <td>{{ v.schoolname }}</td>
              <td>{{ v.healthstatus }}</td>
              <td>{{ v.healthcode }}</td>
              <td class="detail" @click="todetails(v)">详情 ></td>
            </tr>
          </tbody>
        </table>
        <p class='emptydata' v-show='studentdatalist.length == 0'>无数据</p>
      </div>
      <el-pagination :current-page.sync="pagecurrent2" @current-change="handleSizeChange2" background layout="prev, pager, next"
        :total="pagetotal2"></el-pagination>
    </div>
  </div>
</template>

<script>
  import ProvinceChart from './ProvinceChart';

  export default {
    name: 'HelloWorld',
    data() {
      return {
        // map start
        showMapComponent: this.value,
        keyword: '',
        mapStyle: {
          width: '100%',
          height: this.mapHeight + 'px'
        },
        center: {
          lng: 116.404,
          lat: 39.915
        },
        zoom: 15,
        passprovince: '广东',
        // map end
        studentName: '',
        pagecurrent1: 1,
        pagecurrent2: 1,
        pagecurrent3: 1,
        pagecurrent4: 1,
        pagecurrent5: 1,
        pagetotal1: 10,
        pagetotal2: 10,
        pagetotal3: 10,
        pagetotal4: 10,
        pagetotal5: 10,
        curcard: 1,
        study: '',
        nomenu: true,
        operateflag: false,
        passdata: [],
        emptyflag: true,
        pietitle: '2020-06-24',
        countryFlag: false,
        provinceFlag: false,
        cityFlag: false,
        schoolFlag: false,
        gradeFlag: false,
        trendlist: {
          n1: 0,
          n2: 0,
          n3: 0,
          n4: 0,
          n5: 0,
          n6: 0,
          n7: 0
        },
        ranklevel: '',
        trendtime: '',
        agent: '',
        agenter: '',
        phone: '',
        risklevel: '',
        temperature: '',
        confirmrisk: '',
        statisticstype: '1',
        isdate: '1',
        testper: 400,
        temrate: '0.16%',
        riskrate: '-1.84%',
        testrate: '-7.49%',
        areakey: 0,
        timekey: 0,
        schoolkey: 0,
        prokey: 0,
        perkey: 0,
        schooltabflag: 0,
        haveclasssta: '',
        haveworkersta: '',
        havevistorsta: '',
        inpclass: '',
        inpworker: '',
        inpvistor: '',
        inpcard: '',
        inparea: '',
        studentsta: '',
        datalistworker: [],
        datalistvistor: [],
        headlistworker: ['职工ID', '名字', '部门', '联系方式', '最新温测', '温测时间', '地点', '当前状态', '详情'],
        headlistvistor: ['访客ID', '名字', '联系方式', '最新温测', '温测时间', '地点', '当前状态', '操作'],
        schooltab: ['班级概况', '职工概况', '访客概况'],
        headlist: ['风险等级', '今日测温', '今日体温异常', '当前疑似', '当前确诊', '当前居家隔离', '当前医疗隔离', '累计康复人数', '详情'],
        gradeheadlist: ['班级', '学情', '温测', '体温异常', '居家隔离人数', '医疗隔离', '返校隔离', '预警', '操作'],
        cardheadlist: ['卡点ID', '卡点名称', '卡点位置', '人员配置', '负责人', '联系电话', '设备配置', '检测人数', '体温异常', '操作'],
        forbidheadlist: ['场所ID', '场所名称', '场所位置', '最新消杀时间', '负责人联系人'],
        studentheadlist: ['学生ID', '名字', '性别', '最新温测', '测温时间', '地点', '当前状态', '学情预警', '操作'],
        options: [{
          value: '1',
          label: '正常'
        }, {
          value: '2',
          label: '停课'
        }],
        options2: [{
          value: '0',
          label: '正常'
        }, {
          value: '2',
          label: '留校观察'
        }, {
          value: '17',
          label: '医疗交接'
        }, {
          value: '7',
          label: '居家隔离'
        }, {
          value: '5',
          label: '医疗隔离'
        }, {
          value: '18',
          label: '复工申请'
        }, {
          value: '11',
          label: '返校复课'
        }, {
          value: '6',
          label: '返校复工'
        }, {
          value: '14',
          label: '疑似患者'
        }],
        options3: [{
          value: '2',
          label: '禁止入校'
        }, {
          value: '1',
          label: '允许入校'
        }],
        studentoptions: [{
            value: '0',
            label: '正常'
          },
          {
            value: '2',
            label: '留校观察'
          },
          {
            value: '17',
            label: '医疗交接'
          },
          {
            value: '7',
            label: '居家隔离'
          },
          {
            value: '5',
            label: '医疗隔离'
          },
          {
            value: '18',
            label: '复课申请'
          },
          {
            value: '11',
            label: '返校复课'
          },
          {
            value: '14',
            label: '疑似患者'
          },
          {
            value: '6',
            label: '返校复工'
          }
        ],
        datalist: [],
        gradedatalist: [],
        carddatalist: [],
        forbiddatalist: [{
            name: '001',
            n1: '三年一班',
            n2: '东校区西侧',
            n3: '2020-06-12',
            n4: '14:45',
            n5: '马晓晓',
            n6: '1231231231',
            sta: 0
          },
          {
            name: '001',
            n1: '三年一班',
            n2: '东校区西侧',
            n3: '2020-06-12',
            n4: '14:45',
            n5: '马晓晓',
            n6: '1231231231',
            sta: 1
          },
          {
            name: '001',
            n1: '三年一班',
            n2: '东校区西侧',
            n3: '2020-06-12',
            n4: '14:45',
            n5: '马晓晓',
            n6: '1231231231',
            sta: 2
          },
          {
            name: '001',
            n1: '三年一班',
            n2: '东校区西侧',
            n3: '2020-06-12',
            n4: '14:45',
            n5: '马晓晓',
            n6: '1231231231',
            sta: 3
          },
        ],
        studentdatalist: [],
        arealist: [],
        schoolist: [{
            name: '全部',
            code: ''
          },
          {
            name: '幼儿园',
            code: '1'
          },
          {
            name: '小学',
            code: '2'
          },
          {
            name: '初中',
            code: '3'
          },
          {
            name: '高中',
            code: '4'
          },
          {
            name: '职高',
            code: '5'
          },
          {
            name: '中专',
            code: '6'
          },
          {
            name: '大学',
            code: '7'
          },
        ],
        perlist: [{
            name: '全部',
            code: ''
          },
          {
            name: '学生',
            code: '1'
          },
          {
            name: '职工学',
            code: '2'
          },
          {
            name: '访客',
            code: '3'
          },
        ],
        timelist: [{
            name: '今天',
            code: '1'
          },
          {
            name: '7天',
            code: '7'
          },
          {
            name: '14天',
            code: '14'
          },
          {
            name: '30天',
            code: '30'
          }
        ],
        prolist: [{
            name: '测温',
            code: '1'
          },
          {
            name: '体温异常',
            code: '2'
          },
          {
            name: '停课班级',
            code: '8'
          },
          {
            name: '留校观察',
            code: '3'
          },
          {
            name: '居家隔离',
            code: '7'
          },
          {
            name: '医疗隔离',
            code: '5'
          },
          {
            name: '返校复课',
            code: '11'
          }
        ],
        temlist: [],
        gaplist: [],
        stoplist: [{
            name: '日停课班级',
            num: 28,
            sta: 2
          },
          {
            name: '日复课班级',
            num: 100,
            sta: 3
          },
          {
            name: '当前停课班级',
            num: 58,
            sta: 1
          },
          {
            name: '当日增返校复课人数',
            num: 33,
            sta: 0
          }
        ],
        confirmlist: [{
            name: '日确诊人数',
            num: 66,
            sta: 3
          },
          {
            name: '今日核酸检测人数',
            num: 190,
            sta: 0
          },
          {
            name: '累计确诊人数',
            num: 10,
            sta: 1
          },
          {
            name: '今日场所消杀次数',
            num: 100,
            sta: 2
          }
        ],
        cityProvinceChartName: '', // 选择的城市名
        provinceno: '',
        schoolno: '',
        cityno: '',
        schoolLevel: '',
        personType: '',
        classno: '',
        begintime: '',
        endtime: '',
        istoday: '1',
        currentime: '',
        // chartx1: ['0点', '6点', '12点', '18点', '24点'],
        // charty1: [2, 3, 4, 5, 6],
        chartx1: [],
        charty1: [],
        pagecurrent: 1,
        pagesize: 10,
        echart1: ['广州', '深圳', '珠海', '潮汕', '汕头', '东莞', '惠州', '其他'],
        echart2: [{
            value: 32,
            name: '广州'
          },
        ],
        provinceChartAllData: [], // 传递给地区概况组件的数据
        currentProvinceCityName: '', // 传递给地区组件的数据
        currentProvinceShowId: null, // 传递给地区的地图ID
        countyno: ''
      }
    },
    components: {
      ProvinceChart
    },
    filters: {
      sexfilter(v) {
        var sta = '';
        if (v == 0) {
          sta = '女'
        } else {
          sta = '男'
        }
        return sta
      }
    },
    created() {
      var item = JSON.parse(this.$route.query.text);
      console.log(item);
      this.ranklevel = '5';
      this.classno = item.classno;
      this.provinceno = item.provinceno;
      this.cityno = item.cityno;
      this.schoolno = item.schoolno;

      var mydate = new Date();
      var year = mydate.getFullYear();
      var month = mydate.getMonth() + 1;
      var date = mydate.getDate();
      var isdate = year + '-' + month + '-' + date;
      this.currentime = isdate;
    },
    mounted() {
      // this.getCityList();
      this.getStudentdetail();
      this.getStatistics();
      this.getTrends()

      // this.drawLine2();
      // this.drawLine4();
      // this.add()
    },
    methods: {
      changevistor(v){
        this.havevistorsta = v;
        console.log(this.havevistorsta)
      },
      changeclass(v){
        this.haveclasssta = v;
        console.log(this.haveclasssta);
      },
      changeworker(v){
        this.haveworkersta = v;
        console.log(this.haveworkersta)
      },
      picksta(v) {
        console.log(v);
        this.personType = v
      },
      handleSizeChange2(v) {
        this.pagecurrent2 = v;
        if (this.schoolFlag){
          this.getdisinfo()
        }
        this.getStudentdetail();

      },
      handleSizeChange1(v) {

      },
      handleSizeChange3(v) {

      },
      handleSizeChange4(v) {

      },
      handleSizeChange5(v) {
        this.curcard = v;
        this.getcardinfo()
      },
      detailstext() {
        this.$router.push({
          path: '/monitoring',
          query: {
            text: ''
          }
        })
      },
      // 城市概况
      getCityList() {
        // this.headlist = [];
        // this.gradeheadlist = [];
        // this.cardheadlist = [];
        // this.studentheadlist = [];
        this.datalist = [];
        this.echart1 = [];
        this.echart2 = [];
        this.passdata = [];
        // this.gradedatalist = [];
        // this.carddatalist = [];
        // this.studentheadlist = [];
        // this.$http('health/healthInfoStatistics/getBranchs', {
        //   "ranklevel": this.ranklevel,
        //   "provinceno": this.provinceno,
        //   "schoolno": this.schoolno,
        //   "cityno": this.cityno,
        //   "istoday": '',
        //   "statisticstype": '',
        //   "pagecurrent": this.pagecurrent,
        //   "pagesize": this.pagesize
        // }).then(res => {
        //   console.log(res);
        //   this.headlist = [];
        //   this.datalist = [];
        //   if (res.code == 200) {
        //     res.data[0].data.forEach(v => {
        //       this.headlist.push(v.branchName)
        //     });
        //     res.data.forEach((item,i) => {
        //       item.sta = i;
        //       this.datalist.push(item)
        //     })
        //   }
        // })

        // this.$http('health/healthInfoStatistics/getPageBranchs', {
        this.$http('health/healthInfoStatistics/getBranchs', {

          "ranklevel": this.ranklevel,
          "provinceno": this.provinceno,
          "schoolno": this.schoolno,
          "cityno": this.cityno, // 目前先写死 440000 为广东
          "classno": this.classno,
          "istoday": '',
          "statisticstype": '',
          "pagecurrent": this.pagecurrent,
          "pagesize": this.pagesize
        }).then(res => {
          if (res.code == 200) {
            console.log(res)
            // this.cityProvinceChartName = '河北省'
            // this.cityProvinceChartName = res.data[0].name
            // 传递给地图的数据
            this.provinceChartAllData = res.data;
            this.datalist = res.data;

            // this.provinceChartAllData = res.data.records;

            // mine
            // res.data.records[0].data.forEach(v => {
            // res.data[0].data.forEach(v => {
            // this.headlist.push(v.branchName);
            // this.gradeheadlist.push(v.branchName);
            // this.cardheadlist.push(v.branchName);
            // this.forbidheadlist.push(v.branchName);
            // this.studentheadlist.push(v.branchName)
            // });

            // res.data.records.forEach(val => {
            res.data.forEach(val => {
              var obj = {};
              obj.name = val.name;
              obj.value = 2;
              this.echart1.push(val.name);
              this.echart2.push(obj);

              // this.$store.state.passdata.push(val)

              val.sta = 0;
              // this.datalist.push(val);
              // this.gradedatalist.push(val);
              // this.carddatalist.push(val);
              // this.forbiddatalist.push(val);
              // this.studentheadlist.push(val);

            })
            console.log(this.$store.state.passdata)
            this.drawLine2()
          }
        })
      },
      // 搜索
      searchdata() {
        console.log(1)
        this.getStudentdetail()
      },
      // 搜索 班级
      searchdataclass() {
         this.getclass()
      },
      searchdataworker(){
        this.getworker()
      },
      searchdatavistor(){
        this.getvistor()
      },
      // 搜索卡点
      searchdatacard() {
        this.getcardinfo()
      },
      // 搜索消杀
      searchdatadis() {
        this.getdisinfo()
      },
      // 导出卡点信息
      exportcard() {
        this.$http('/stuck/batchexport', {
          "schoolname": this.inpcard,
        }).then(res => {
          console.log(res)
        })
      },

      // 学生概况
      getStudentdetail() {
        this.$http('/health/healthInfoStatistics/getPersonHealthsPage', {
          "name": this.studentName,
          // "ranklevel": "4",
          // "pagesize": "2",
          // "pagecurrent": this.pagecurrent,
          // "schoolno": "722627",

          "ranklevel": "5",
          "classno": this.classno,
          "personType": this.personType,
          "pagecurrent": this.pagecurrent,
          "pagesize": this.pagesize,
          "schoolno": this.schoolno
        }).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.studentdatalist = res.data.records;
            this.pagetotal2 = res.data.pages * 10;
            console.log(this.studentdatalist)
          }
        })
      },
      // 获取学校
      getschool() {
        this.headlist = [];
        this.$http('/health/healthInfoStatistics/getBranchsSchool', {
          "ranklevel": "3",
          "cityno": this.cityno,
        }).then(res => {
          console.log(res);
          if (res.code = 200) {
            res.data[0].data.forEach(val => {
              this.headlist.push(val.branchName)
            })
            this.datalist = res.data
          }
        })
      },
      // 获取班级
      getclass() {
        this.$http('/health/healthInfoStatistics/getClassInfos', {
          "classname": this.inpclass,
          "stydy": this.haveclasssta,
          "ranklevel": "4",
          "cityno": this.cityno,
          "classno": this.classno,
          "schoolno": this.schoolno
        }).then(res => {
          console.log(res);
          if (res.code == 200) {
            // res.data[0].data.forEach(val => {
            // this.gradeheadlist.push(val.branchName)
            // })
            this.gradedatalist = res.data
          }
        })
      },
      // 卡点信息
      getcardinfo() {
        this.$http('/stuck/fuzzyquery/page', {
          "pagesize": 5,
          "pagecurrent": this.curcard,
          "stuckname": this.inpcard, // #卡点名称
          "contact": "" // #负责人
        }).then(res => {
          console.log(res);
          if (res.code == 200) {
            this.carddatalist = res.data.stuck.records;
            this.pagetotal5 = res.data.stuck.pages * 10;
          }
        })
      },
      // 消杀信息
      getdisinfo() {
        this.$http('/disinfect/getmanage', {
          "personincharge":'',
          "starttime": '',
          "endtime": '',
          "organizaitonname": this.inparea,
          "pagecurrent": 1,
          "pagesize": 5
        }).then(res => {
          console.log(res);
          if (res.code == 200) {
            this.forbiddatalist = res.data.tplace.records;
            this.pagetotal2 = res.data.tplace.pages * 10;
          }
        })
      },

      // 首页豆腐块
      getStatistics() {
        this.$http('/health/healthInfoStatistics/getStatistics', {
          "countyno": this.countyno,
          "ranklevel": this.ranklevel,
          "provinceno": this.provinceno,
          "schoolno": this.schoolno,
          "cityno": this.cityno,
          "istoday": '',
          "statisticstype": '',
          "schoolLevel": this.schoolLevel,
          "personType": this.personType
        }).then(
          res => {
            console.log(res);
            if (res.code == 200) {
              this.temlist = [];
              this.gaplist = [];
              this.stoplist = [];
              this.confirmlist = [];
              this.risklevel = res.data[0].risklevel;

              if (this.ranklevel == '5') {
                res.data[0].data.forEach(val => {
                  // alert(val.branchName)
                  switch (val.branchName) {
                    case '日测温':
                      var obj = {};
                      obj.count = val.count;
                      obj.text = val.branchName;
                      this.temlist.push(obj)
                      this.temperature = val.count
                      break;
                    case '日测温异常':
                      var obj = {};
                      obj.count = val.count;
                      obj.text = val.branchName;
                      this.temlist.push(obj);
                      this.temperature = val.count;  // 体温异常
                      break;
                    case '日疑似人数':
                      var obj = {};
                      obj.count = val.count;
                      obj.text = val.branchName;
                      this.temlist.push(obj)
                      break;
                    case '今日确诊':
                      var obj = {};
                      obj.count = val.count;
                      obj.text = val.branchName;
                      this.temlist.push(obj);
                      this.confirmrisk = val.count;     //确认病例
                      break;
                      // 隔离
                    case '日居家隔离':
                      var obj = {};
                      obj.count = val.count;
                      obj.text = val.branchName;
                      this.gaplist.push(obj)
                      break;
                    case '日医疗隔离':
                      var obj = {};
                      obj.count = val.count;
                      obj.text = val.branchName;
                      this.gaplist.push(obj)
                      break;
                    case '日康复人数':
                      var obj = {};
                      obj.count = val.count;
                      obj.text = val.branchName;
                      this.gaplist.push(obj)
                      break;
                    case '确诊人数':
                      var obj = {};
                      obj.count = val.count;
                      obj.text = val.branchName;
                      this.gaplist.push(obj)
                      break;
                      // 确诊
                      case '居家隔离':
                        var obj = {};
                        obj.count = val.count;
                        obj.text = val.branchName;
                        this.confirmlist.push(obj)
                        break;
                      case '日核酸检测':
                        var obj = {};
                        obj.count = val.count;
                        obj.text = val.branchName;
                        this.confirmlist.push(obj);
                        this.testper = val.count;   // 核酸检测
                        break;
                      case '班级总人数':
                        var obj = {};
                        obj.count = val.count;
                        obj.text = val.branchName;
                        this.confirmlist.push(obj)
                        break;
                      case '医疗隔离':
                        var obj = {};
                        obj.count = val.count;
                        obj.text = val.branchName;
                        this.confirmlist.push(obj)
                        break;
                  }
                })
                console.log(this.temlist)
              }
              // 四大块
              res.data.forEach(v => {
                switch (v.text) {
                  case '测温异常人数':
                    this.temperature = v.count;
                    break;
                  case '今日确诊':
                    this.confirmrisk = v.count;
                    break;
                  case '日核酸检测':
                    this.testper = v.count;
                    break;
                }
              });
              // 十六块
              // this.temlist = [];
              // this.gaplist = [];
              // this.stoplist = [];
              // this.confirmlist = [];
              // res.data.forEach((item,index) => {
              //   switch (item.risklevel) {
              //     case 'y':
              //       v.sta = 0;
              //       this.temlist.push(v);
              //       break;
              //   }
              // });

              res.data.forEach((v, i) => {
                switch (v.text) {
                  //测温统计
                  case '日测温':
                    v.sta = i;
                    this.temlist.push(v);
                    break;
                  case '日测温异常':
                    v.sta = i;
                    this.temlist.push(v);
                    break;
                  case '日疑似人数':
                    v.sta = i;
                    this.temlist.push(v);
                    break;
                  case '日康复人数':
                    v.sta = i;
                    this.temlist.push(v);
                    break;
                    //隔离统计
                  case '日医疗隔离':
                    v.sta = i;
                    this.gaplist.push(v);
                    break;
                  case '日居家隔离':
                    v.sta = i;
                    this.gaplist.push(v);
                    break;
                  case '医疗隔离':
                    v.sta = i;
                    this.gaplist.push(v);
                    break;
                  case '居家隔离':
                    v.sta = i;
                    this.gaplist.push(v);
                    break;
                    // 停复课统计
                  case '日停课班级':
                    v.sta = i;
                    this.stoplist.push(v);
                    break;
                  case '日复课班级':
                    v.sta = i;
                    this.stoplist.push(v);
                    break;
                  case '停课班级':
                    v.sta = i;
                    this.stoplist.push(v);
                    break;
                  case '日返校复课人数':
                    v.sta = i;
                    this.stoplist.push(v);
                    break;
                    // 确诊和其他统计
                  case '今日确诊':
                    v.sta = i;
                    this.confirmlist.push(v);
                    break;
                  case '日核酸检测':
                    v.sta = i;
                    this.confirmlist.push(v);
                    break;
                  case '确诊人数':
                    v.sta = i;
                    this.confirmlist.push(v);
                    break;
                  case '日消杀次数':
                    v.sta = i;
                    this.confirmlist.push(v);
                    break;
                }
              });
              console.log(this.temlist)
            }
          }
        )
      },
      // 趋势图
      getTrends() {
        this.chartx1 = [];
        this.charty1 = [];
        this.$http('/health/healthInfoStatistics/getTrends', {
          "isdate": this.isdate,
          "provinceno": this.provinceno,
          "schoolno": this.schoolno,
          "cityno": this.cityno,
          "istoday": this.istoday,
          "statisticstype": this.statisticstype,
          "classno": "",
          "begintime": this.begintime,
          "endtime": this.endtime,
        }).then(
          res => {
            console.log(res);
            if (res.code == 200) {
              if (res.data.length > 0) {
                res.data.forEach(v => {
                  this.chartx1.push(v.unitime);
                  this.charty1.push(v.count);
                });
                this.emptyflag = false;
                this.drawLine4();
              } else {
                this.chartx1 = [];
                this.charty1 = []
                this.emptyflag = true
              }
              console.log(this.chartx1);
              console.log(this.charty1)
            }
          }
        )
      },
      // 更改趋势图的 日期
      picktrendate() {
        this.timekey = -1;
        console.log(this.trendtime)
        if (this.trendtime != '') {
          if (this.trendtime[0] == this.currentime && this.trendtime[1] == this.currentime) {
            this.istoday = '1';
          } else {
            this.istoday = '0';
          }
          this.isdate = 0;
          this.begintime = this.trendtime[0];
          this.endtime = this.trendtime[1];
          this.getTrends()
        }
      },
      add() {
        // 创建地图实例
        var map = new BMap.Map("addd");
        //设置地图的中心点如合肥的坐标
        var point = new BMap.Point(117.17, 31.52);
        // 初始化地图，设置中心点坐标和地图级别
        map.centerAndZoom(point, 8);
        // 允许滚轮缩放
        map.enableScrollWheelZoom();
        //只显示某个省份的关键代码
        var cityName = '安徽省';
        //添加缩略地图控件
        map.addControl(new BMap.OverviewMapControl());
        map.addControl(new BMap.NavigationControl({
          type: BMAP_NAVIGATION_CONTROL_LARGE,
          anchor: BMAP_ANCHOR_TOP_LEFT,
          offset: new BMap.Size(900, 500)
        }));
        var bdary = new BMap.Boundary();
        bdary.get(cityName, function(rs) { //获取行政区域       
          var EN_JW = "180, 90;"; //东北角
          var NW_JW = "-180,  90;"; //西北角
          var WS_JW = "-180, -90;"; //西南角
          var SE_JW = "180, -90;"; //东南角
          //4.添加环形遮罩层
          var ply1 = new BMap.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, {
            strokeColor: "none",
            fillColor: "#fefb9c",
            fillOpacity: 1,
            strokeOpacity: 0.5
          }); //建立多边形覆盖物
          map.addOverlay(ply1);
        });
      },
      changearea(v, k) {
        this.areakey = k;
        // 保存选择城市的名称
        this.cityProvinceChartName = v.name;
        this.countyno = v.code;
        this.getStatistics();
      },
      changeschool(v, k) {
        this.schoolkey = k;
        console.log(v);
        this.schoolLevel = v.code;
        this.getStatistics();
      },
      changeper(v, k) {
        this.perkey = k;
        console.log(v);
        this.personType = v.code;
        this.getStatistics();
      },
      changeday(v, i) {
        this.timekey = i;
        console.log(v);
        if (v.code == 1) {
          this.istoday = '1';
        } else {
          this.istoday = '0';
        }
        this.trendtime = '';

        this.isdate = v.code;
        this.getTrends()
      },
      changepro(v, i) {
        this.prokey = i;
        this.statisticstype = v.code;
        this.getTrends()
      },
      detilsen() {
        console.log(3)
      },
      todetailsprovince(v) {
        this.$router.push({
          path: '/city',
          params: { id: v.branchCode }
        })
        // this.cityno = v.branchCode;
        // this.ranklevel = '2';
        // this.provinceno = v.branchCode;

      },
      todetailsdisinfect(v){
        var item = JSON.stringify(v)
        this.$router.push({path: '/disindectdetail', query:{text: item}})
      },
      todetailscard(v){
        console.log(v)
        var item = JSON.stringify(v)
        this.$router.push({path: '/cardDetail', query:{text: item}})
      },
      todetails(v) {
        // asdasd
        console.log(v)
        this.$router.push('/monitorDetails');
        var item = JSON.stringify(v)
        this.$router.push({
          path: '/disindectdetail',
          query: {
            text: item
          }
        })
      },
      // 职工概况
      getworker(){
        this.$http('/health/healthInfoStatistics/getPersonHealths', {
          "ranklevel": this.ranklevel,
          "provinceno": this.provinceno,
          "schoolno": this.schoolno, // this.schoolno,
          "personType": '2',
          "cityno": this.cityno,
          "istoday": "",
          "statisticstype": this.haveworkersta,
          "personType": '2',
          "studentname": this.inpworker,
          "schoolname": this.inpschool,
          "schoolLevel": this.schoolLevel,
          "healthCode": this.healthycode,
          "pagecurrent": this.pagecurrent,
          "pagesize": this.pagesize
        }).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.datalistworker = res.data;
          }
        })
      },
      // 访客概况
      getvistor(){
        this.$http('/health/healthInfoStatistics/getPersonHealths', {
          // "ranklevel": this.ranklevel,
          // "schoolno": this.schoolno, // this.schoolno,
          // "pagecurrent": this.pagecurrent,
          // "pagesize": this.pagesize,

          // "provinceno": this.provinceno,
          // "cityno": this.cityno,
          // "istoday": "",
          // "statisticstype": this.statisticstype,
          // "personType": '3',
          // "studentname": this.inpname,
          // "schoolname": this.inpschool,
          // "schoolLevel": this.schoolLevel,
          // "healthCode": this.healthycode,

          "studentname": this.inpvistor,
          "personType": '3',
          "personstate": this.havevistorsta,
          "ranklevel": this.ranklevel,
          "pagesize": this.pagesize,
          "pagecurrent": this.pagecurrent,
          "schoolno": this.schoolno
        }).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.datalistvistor = res.data;
          }
        })
      },
      changesch(i, v) {
        this.schooltabflag = i;
        console.log(i);
        if (i == 1) { // 职工
          this.datalistworker = [];
          this.getworker()
        } else if (i == 2) { // 访客
          this.datalistvistor = [];
          this.getvistor()
        }
      },
      drawLine4() {
        let that = this;
        let myChart = this.$echarts.init(document.getElementById('singleChart'));
        myChart.setOption({
          title: {
            text: ''
          },
          // tooltip: {
          //     trigger: 'axis',
          //     axisPointer: {
          //         type: 'cross',
          //         label: {
          //             backgroundColor: 'blue'
          //         }
          //     }
          // },
          // legend: {
          //     data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
          // },
          tooltip: {
            // trigger: 'item', //标签
            trigger: 'axis', //标签
            // backgroundColor: '#000',
            color: 'red',
            axisPointer: {
              // type: 'cross',
              // label: {
              //     backgroundColor: 'blue'
              // }
              crossStyle: {
                backgroundColor: 'red'
              }
            },
            formatter: function(params) {
              console.log(params);
              // 可有自定义表格、html样式等；
              var str = '测温人数：' + that.trendlist.n1 + '<br/>' + '测温异常人数：' + that.trendlist.n2 + '<br/>' + '疑似人数：' +
                that.trendlist.n3 +
                '<br/>' + '确诊人数：' + that.trendlist.n4 + '<br/>' + '居家隔离：' + that.trendlist.n5 + '<br/>' + '医疗隔离：' +
                that.trendlist.n6 + '<br/>' + '康复人数：' + that.trendlist.n7;
              return str;
            }
          },
          // toolbox: {
          //     feature: {
          //         saveAsImage: {}
          //     }
          // },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: that.chartx1, // ['0点', '6点', '12点', '18点', '24点'],
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            },
          }],
          yAxis: [{
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            },
            //设置网格线颜色
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#333'],
                width: 1,
                type: 'solid'
              }
            }
          }],
          series: [{
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default',
                  color: '#090f42',
                },
                lineStyle: { //线的颜色
                  color: '#2c39ec'
                },
                //以及在折线图每个日期点顶端显示数字
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#fff'
                  }
                }
              },
            },
            data: that.charty1,  // [23, 32, 101, 134, 90]
          }, ]
        });
      },
      drawLine() {
        let that = this;
        let myChart = this.$echarts.init(document.getElementById('leftChart'));
        myChart.setOption({
          title: {
            text: ''
          },
          // tooltip: {
          //     trigger: 'axis',
          //     axisPointer: {
          //         type: 'cross',
          //         label: {
          //             backgroundColor: 'blue'
          //         }
          //     }
          // },
          // legend: {
          //     data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
          // },
          tooltip: {
            // trigger: 'item', //标签
            trigger: 'axis', //标签
            // backgroundColor: '#000',
            color: 'red',
            axisPointer: {
              // type: 'cross',
              // label: {
              //     backgroundColor: 'blue'
              // }
              crossStyle: {
                backgroundColor: 'red'
              }
            },
            formatter: function(params) {
              // console.log(params);
              // 可有自定义表格、html样式等；
              var str = '测温人数：' + params[0].value + '<br/>' + '测温异常人数：' + that.trendlist.n2 + '<br/>' + '疑似人数：' +
                that.trendlist.n3 +
                '<br/>' + '确诊人数：' + that.trendlist.n4 + '<br/>' + '居家隔离：' + that.trendlist.n5 + '<br/>' + '医疗隔离：' +
                that.trendlist.n6 + '<br/>' + '康复人数：' + that.trendlist.n7;
              return str;
            }
          },
          // toolbox: {
          //     feature: {
          //         saveAsImage: {}
          //     }
          // },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            // data: ['0点', '6点', '12点', '18点', '24点'],
            data: that.chartx1,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            },
          }],
          yAxis: [{
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            },
            //设置网格线颜色
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#333'],
                width: 1,
                type: 'solid'
              }
            }
          }],
          series: [{
            name: '时刻',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default',
                  color: '#090f42',
                },
                lineStyle: { //线的颜色
                  color: '#2c39ec'
                },
                //以及在折线图每个日期点顶端显示数字
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#fff'
                  }
                }
              },
            },
            // data: [23, 32, 101, 134, 90],
            data: that.charty1
          }, ]
        });
      },
      drawLine2() {
        let that = this;
        let myChart = this.$echarts.init(document.getElementById('rightChart'));
        // 绘制图表
        myChart.setOption({
          title: {
            text: that.pietitle,
            textAlign: 'left',
            padding: 30,
            textStyle: {
              "fontSize": 24,
              "fontWeight": "normal",
              "color": "white"
            }
          },
          // grid: {
          //   left: '0%',
          //   right: '4%',
          //   bottom: '3%',
          //   // containLabel: true
          // },
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)',
            // formatter: '{a} <br/>{b}: {c} ({d}%)',
          },
          legend: {
            orient: 'vertical',
            right: 10,
            padding: 20,
            data: that.echart1,
            icon: "circle",
            textStyle: {
              fontSize: 14,
              color: '#B6B9BE',
              rich: {
                b: {
                  color: 'red'
                }
              },
            },
            formatter: function(name) {
              var datas = that.echart2;
              var index = 0;
              datas.forEach(function(v, i) {
                if (v.name == name) {
                  index = i;
                }
              });
              return name + ": " + datas[index].value;
            }
          },
          series: [{
            name: '访问来源',
            type: 'pie',
            radius: ['30%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: that.echart2
          }]
        });
      },
      drawLine3() {
        let that = this;
        let myChart = this.$echarts.init(document.getElementById('addd'));
        // 绘制图表
        myChart.setOption({
          title: {
            text: that.pietitle,
            textAlign: 'left',
            padding: 30,
            textStyle: {
              "fontSize": 24,
              "fontWeight": "normal",
              "color": "white"
            }
          },
          // grid: {
          //   left: '0%',
          //   right: '4%',
          //   bottom: '3%',
          //   // containLabel: true
          // },
          // tooltip: {
          //   trigger: 'item',
          //   formatter: '{b}: {c} ({d}%)',
          //   // formatter: '{a} <br/>{b}: {c} ({d}%)',
          //
          // },
          // legend: {
          //   orient: 'vertical',
          //   right: 10,
          //   padding: 20,
          //   data: ['广州', '深圳', '珠海', '潮汕', '汕头', '东莞', '惠州', '其他'],
          //   textStyle: {
          //     fontSize: 14,
          //     color: '#B6B9BE',
          //     // rich:{
          //     //   b:{color:'red'}
          //     // },
          //   }
          // },
          // series: [
          //   {
          //     name: '访问来源',
          //     type: 'pie',
          //     radius: ['30%', '50%'],
          //     avoidLabelOverlap: false,
          //     label: {
          //       show: false,
          //       position: 'center'
          //     },
          //     emphasis: {
          //       label: {
          //         show: true,
          //         fontSize: '30',
          //         fontWeight: 'bold'
          //       }
          //     },
          //     labelLine: {
          //       show: false
          //     },
          //     data: [
          //       {value: 32, name: '广州'},
          //       {value: 21, name: '深圳'},
          //       {value: 48, name: '珠海'},
          //       {value: 1, name: '潮汕'},
          //       {value: 42, name: '汕头'},
          //       {value: 17, name: '东莞'},
          //       {value: 135, name: '惠州'},
          //       {value: 21, name: '其他'}
          //     ]
          //   }
          // ]
        });
      },
    }
  }
</script>

<style lang="less" scoped>
  /deep/ .el-pagination {
    margin: 30px 0;
  }

  /deep/ .el-pagination.is-background .btn-next,
  /deep/ .el-pagination.is-background .btn-prev,
  /deep/ .el-pagination.is-background .el-pager li {
    background-color: #090f42;
    color: #fff;
    border: 1px solid #1a2497;
  }

  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #1520be;
    border-color: #1520be;
  }
  .addvistor{
    float: right;
    a{
      color: #252fc7;
      &:hover{
        color: white;
      }
    }
  }

  .hide {
    display: none !important;
  }

  .emptydata {
    font-size: 14px;
    color: white;
    text-align: center;
    line-height: 44px;
  }

  .index {
    #leftChartempty {
      font-size: 24px;
      color: #37c3f8;
      text-align: center;
      line-height: 340px;
    }

    .title {
      font-size: 14px;
      color: white;

      span {
        margin-right: 30px;
      }
    }

    // 四个大屏
    .screen {
      width: 100%;
      display: flex;
      margin: 30px 0;
      justify-content: space-between;

      li {
        display: inline-block;
        width: 256px;
        height: 192px;
        background-color: white;

        div {
          padding-left: 70px;
          margin-top: 20px;
          padding-right: 35px;

          p {
            font-size: 14px;
            color: #fff;
            line-height: 30px;

            span {
              float: right;
              font-size: 12px;

              &.tems {
                color: #2ba301;
              }

              &.risks {
                color: #ff1812;
              }
            }
          }

          b {
            font-size: 24px;
            color: #fff;
          }
        }

        &:nth-child(1) {
          background-color: #000418;
          background-image: url(../assets/images/t1.png);
          background-repeat: no-repeat;
          background-position: 50% 72px;
          background-size: 346px;

          div {
            background: url(../assets/images/risk.png) no-repeat 20px center;
            background-size: 30px;
          }
        }

        &:nth-child(2) {
          background-color: #000418;
          background-image: url(../assets/images/t2.png);
          background-repeat: no-repeat;
          background-position: 50% 72px;
          background-size: 346px;

          div {
            background: url(../assets/images/temperature.png) no-repeat 20px center;
            background-size: 30px;
          }
        }

        &:nth-child(3) {
          background-color: #000418;
          background-image: url(../assets/images/t3.png);
          background-repeat: no-repeat;
          background-position: 50% 26px;
          background-size: 346px;

          div {
            background: url(../assets/images/case.png) no-repeat 20px center;
            background-size: 30px;
          }
        }

        &:nth-child(4) {
          background-color: #000418;
          background-image: url(../assets/images/t4.png);
          background-repeat: no-repeat;
          background-position: 50% 80px;
          background-size: 350px;

          div {
            background: url(../assets/images/test.png) no-repeat 20px center;
            background-size: 30px;
          }
        }
      }
    }

    // 地区 tab
    .comtab {
      overflow: hidden;
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;

      span {
        width: 110px;
        font-size: 14px;
        color: white;
        line-height: 36px;

        &.gap {
          letter-spacing: 1em;
        }
      }

      ul {
        width: 100%;

        li {
          display: inline-block;
          margin-right: 25px;

          &.picked {
            button {
              color: #00c8f1;
            }
          }

          button {
            cursor: pointer;
            border: none;
            background: transparent;
            font-size: 14px;
            color: white;
            line-height: 36px;

            &:focus {
              outline: none;
            }

            &:hover {
              color: #00c8f1;
            }
          }
        }
      }
    }

    // 地区 tab 对应的数据
    .situation {
      display: flex;
      justify-content: space-between;
      background-color: #000418;
      padding: 20px;
      box-sizing: border-box;
      margin-bottom: 15px;

      span {
        width: 16px;
        font-size: 14px;
        color: white;
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
        border: 1px solid #192b7c;
        background-color: #0b1233;
        border-radius: 4px;
        padding: 16px 8px;
        text-align: center;
        letter-spacing: 4px;

        &.spespan {
          font-size: 12px;
          padding: 6px 8px;
        }
      }

      ul {
        justify-content: space-between;
        width: 94%;
        display: flex;

        li {
          width: 226px;
          height: 128px;
          border-left: 1px solid #454b66;
          border-right: 1px solid #454b66;
          border-top: 1px solid #101944;
          border-bottom: 1px solid #101944;
          border-radius: 6px;

          &:hover {
            border: 1px solid white;
            cursor: pointer;

            b {
              color: #3440de;
            }

            p {
              color: #5862e4;

              i {
                background-color: #444ecf !important;
              }
            }
          }

          b {
            display: block;
            font-size: 30px;
            color: white;
            text-align: center;
            line-height: 80px;
            background-color: #000418;
            border-radius: 6px;
          }

          p {
            background-color: #0b1026;
            font-size: 14px;
            color: white;
            text-align: center;
            line-height: 46px;
            border-top: 1px solid #101944;
            border-radius: 6px;

            i {
              display: inline-block;
              width: 8px;
              height: 8px;
              border-radius: 50%;
              margin-right: 8px;
            }

            .col1 {
              background-color: green;
            }

            .col2 {
              background-color: yellow;
            }

            .col3 {
              background-color: blue;
            }

            .col4 {
              background-color: orange;
            }

            .col5 {
              background-color: red;
            }
          }
        }
      }
    }

    //趋势分析
    .trend {
      h2 {
        font-size: 18px;
        color: white;
        margin: 40px 0 30px 0;
      }

      .timebox {
        overflow: hidden;
        width: 100%;
        margin: 12px 0;

        ul {
          display: inline-block;
          float: left;

          li {
            display: inline-block;
            float: left;
            font-size: 14px;
            color: white;
            margin-right: 32px;
            line-height: 24px;

            &:first-child {
              width: 60px;
            }

            &.actived {
              button {
                color: #00c8f1;
              }
            }

            button {
              font-size: 14px;
              color: white;
              border: none;
              background-color: transparent;
              cursor: pointer;

              &:focus {
                outline: none;
              }

              &:hover {
                color: #00c8f1;
              }
            }
          }
        }

        .timeicon {
          float: right;
          font-size: 18px;
          width: 32px;
          height: 28px;
          line-height: 30px;
          border: 1px solid white;
          border-radius: 0 4px 4px 0;
          color: white;
        }

        .picktime {
          float: right;
          background-color: transparent;
          border-radius: 4px 0 0 4px;
          width: 280px;
          line-height: 30px;
          height: 30px;
          font-size: 12px;
          color: white;

          /deep/ .el-range-separator {
            line-height: 24px;
            color: white;
          }

          /deep/ .el-icon-date {
            display: none;
          }

          /deep/ .el-input__icon {
            line-height: 30px;
            height: 30px;
            color: white;
          }

          /deep/ .el-range-input {
            background-color: transparent;
            line-height: 30px;
            height: 30px;
            color: white;
          }

          /deep/ .el-input__inner {
            height: 30px !important;
            line-height: 30px !important;
            padding-left: 10px;
            background: transparent;
            color: white;
            font-size: 12px;
            border-radius: 4px 0 0 4px;
          }

          /deep/ .el-input__prefix {
            display: none;
          }

          /deep/ .el-input__icon {
            line-height: 30px;
          }
        }
      }

      .statistics {
        overflow: hidden;
        width: 100%;
        margin-bottom: 40px;

        li {
          display: inline-block;
          float: left;
          font-size: 14px;
          color: white;
          margin-right: 32px;
          line-height: 24px;

          &:first-child {
            width: 60px;
          }

          &.picks {
            button {
              color: #00c8f1;
            }
          }

          button {
            font-size: 14px;
            color: white;
            border: none;
            background-color: transparent;
            cursor: pointer;

            &:focus {
              outline: none;
            }

            &:hover {
              color: #00c8f1;
            }
          }
        }
      }
    }

    // 趋势图
    .region {
      overflow: hidden;
      position: relative;
      width: 100%;

      .detail {
        cursor: pointer;
        position: absolute;
        right: 20px;
        bottom: 30px;
        color: #4353da;
        font-size: 14px;

        &:hover {
          color: white;
        }
      }
    }

    // 当前省份
    .curentcity {
      margin-top: 20px;

      h2 {
        font-size: 18px;
        color: white;
        margin: 40px 0 30px 0;
      }
    }

    // 学校视角
    #schoolbox {
      margin-top: 40px;

      .vicetit {
        line-height: 50px;
        font-size: 16px;
        color: #fff;
        margin: 30px 0;
        border-bottom: 1px solid #7d7d7d;
      }

      ul {
        overflow: hidden;
        width: 100%;
        margin-bottom: 20px;

        li {
          display: inline-block;
          cursor: pointer;
          margin-right: 30px;
          font-size: 16px;
          color: #fff;
          font-weight: 600;

          &:hover {
            color: #4353da;
          }
        }

        .schoolpicked {
          color: #4353da;
        }
      }

      .menu {
        display: flex;
        justify-content: start;
        margin: 40px 0;

        .haveclasssta {
          /deep/ .el-input__inner {
            background-color: transparent;
            color: #fff;
          }
        }

        span {
          line-height: 40px;
          font-size: 14px;
          color: #fff;
          display: inline-block;
          margin-right: 15px;
        }

        .studysta {
          margin-left: 20px;
        }

        .exports {
          font-size: 14px;
          color: #1e29ad;
          cursor: pointer;

          &:hover {
            color: #fff;
          }
        }

        .inp {
          width: 200px;

          /deep/ .el-input__inner {
            color: #fff;
            background-color: transparent;
          }
        }

        .search {
          margin: 0 25px 0 30px;
          background-color: #1e29ad;
          border-color: #1e29ad;

          &:hover {
            background-color: #409EFF;
            border-color: #409EFF;
          }
        }

        .el-date-editor {
          /deep/ .el-input__prefix {
            display: none;
          }

          /deep/ .el-input__inner {
            background-color: transparent;
            color: #fff;
          }
        }
      }
    }

    // 城市概况
    .citybox {
      h2 {
        font-size: 18px;
        color: white;
        margin: 40px 0 30px 0;
      }
    }

    .cabin {
      padding: 10px 20px;
      background: #000;

      table {
        width: 100%;
        display: table;
        border-collapse: collapse;

        thead {
          border-bottom: 1px solid #313445;

          th {
            color: #fff;
            font-size: 14px;
            font-weight: 500;
            line-height: 60px;

            &:first-child {
              border-right: 1px solid #313445;
            }
          }
        }

        tbody {
          tr {
            td {
              &:first-child {
                border-right: 1px solid #313445;
              }
            }
          }

          td {
            font-size: 13px;
            color: #fff;
            text-align: center;
            line-height: 60px;

            &.detail {
              color: #2a36e0;
              cursor: pointer;

              &:hover {
                color: orangered;
              }
            }

            i {
              display: inline-block;
              width: 8px;
              height: 8px;
              border-radius: 50%;
              margin-right: 6px;
            }

            .t1 {
              background-color: #3c3694;
            }

            .t2 {
              background-color: #ca8c38;
            }

            .t3 {
              background-color: #8a58d1;
            }

            .t4 {
              background-color: #c5506f;
            }
          }
        }
      }
    }
  }
</style>
